<!--
1.0.2 取消line-height，在部分安卓机型出现不居中情况，取消default类型，增加cancel类型和mini尺寸
1.0.1 使用line-height处理居中，不支持多行按钮
-->
<template>
  <div class="sh-btn"
       @tap.stop="bindClick()"
       :class="{
                    primary:type==='primary',
                    danger:type==='danger',
                    disabled:type==='disabled',
                    cancel:type==='cancel',
                    mini:size === 'mini',
                }">
    <slot></slot>
  </div>
</template>
<style>
  .sh-btn {
    text-align: center;
    padding: 0.65rem 0;
    /*height: 2.45rem;*/
    /*line-height: 2.45rem;*/
    box-sizing: border-box;
    background: transparent;
    color: #f1cf92;
    border: 1px solid #f1cf92;

    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    border-radius: 5rem;
  }
  .sh-btn.mini{
    display: inline-block;
    padding: 0.25rem 0.75rem;
  }

  .sh-btn:active {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
  }

  .sh-btn.primary {
    color: #333;
    background-color: #f1cf92;
    border-color: #f1cf92;
  }

  .sh-btn.danger {
    color: #fff;
    background-color: #e64340;
    border-color: #e64340;
  }

  .sh-btn.disabled {
    color: #fff;
    background-color: #e4e4e4;
    border-color: #e4e4e4;
  }
  .sh-btn.cancel {
    color: #222;
    background-color: transparent;
    border-color: #e4e4e4;
  }

</style>
<script>
  export default {
    name: 'sh-btn',
    props: {
      size: {
        require: false,
      },
      type: {
        validator(value) {
          return ['default', 'primary', 'danger', 'disabled', 'cancel'].indexOf(value) > -1;
        },
        require: false,
      },
      textColor: {
        require: false,
      },
      bgColor: {
        require: false,
      },
    },
    data() {
      return {
        isMoving: false,
      }
    },
    beforeMount: function () {

    },
    mounted: function () {
    },
    methods: {
      bindClick() {
        this.$emit('tap');
      }
    },
    watch: {},
    computed: {}
  };
</script>
